<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="_csrf" th:if="${_csrf}" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:if="${_csrf}" th:content="${_csrf.headerName}"/>
    <title>Service UI Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3">
    <div th:fragment="webAuthnLogin">

        <script type="text/javascript" th:src="@{#{webjars.text-encoding.js}}"></script>
        <script type="text/javascript" th:src="@{#{webjars.text-encoding-indexes.js}}"></script>
        <script type="text/javascript" th:src="@{#{webjars.whatwg-fetch.js}}"></script>
        <script type="text/javascript" th:src="@{#{webjars.base64.js}}"></script>

        <script type="text/javascript" th:inline="javascript">
            /*<![CDATA[*/
            let appId = /*[[${webauthnApplicationId}]]*/;
            /*]]>*/
        </script>

        <script type="text/javascript" th:inline="javascript">
            let authFailTitle = [[#{ screen.authentication.webauthn.authn.fail.title }]];
            let authFailDesc = [[#{ screen.authentication.webauthn.authn.fail.desc }]];
        </script>

        <script th:src="@{/js/webauthn/webauthn.js}"></script>

        <div style="display: none" id="diagnostics">
            <p>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#serverResponse" aria-expanded="false" aria-controls="serverResponse">
                    Server Response
                </button>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#authenticatorResponse" aria-expanded="false" aria-controls="authenticatorResponse">
                    Authenticator Response
                </button>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#requestPanel" aria-expanded="false" aria-controls="requestPanel">
                    Request
                </button>
            </p>
            <div class="collapse" id="serverResponse">
                <div class="card card-body">
                    <h4>Server Response:</h4>
                    <pre id="session"></pre>
                    <pre id="server-response"></pre>
                </div>
            </div>
            <div class="collapse" id="authenticatorResponse">
                <div class="card card-body">
                    <h4>Authenticator Response:</h4>
                    <pre id="authenticator-response"></pre>
                </div>
            </div>
            <div class="collapse" id="requestPanel">
                <div class="card card-body">
                    <h4>WebAuthN Request:</h4>
                    <pre id="request"></pre>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center flex-column mdc-card card p-4 m-auto">
            <div class="d-flex justify-content-center flex-column align-items-center">
                <h2 id="status" th:text="#{screen.authentication.webauthn.login.title}" />
            </div>
            <p th:text="#{screen.authentication.webauthn.login.desc}">Login</p>

            <div id="errorPanel" class="banner banner-danger alert alert-danger alert-dismissible mb-4"
                 th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
                <p th:each="message : ${flowRequestContext.messageContext.allMessages}"
                   th:utext="#{${message.text}}">
                    Error Message Text
                </p>
            </div>

            <div id="messages"></div>
            <div id="device-info">
                <div class="d-flex justify-content-center flex-column align-items-center">
                    <br>
                    <img id="device-icon"/>
                    <br>
                    <span id="device-name"></span>
                </div>
            </div>
            <div class="d-flex justify-content-center flex-column align-items-center">
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        name="authnButton" id="authnButton" accesskey="a" type="button">
                    <i class="mdi mdi-fingerprint fas fa-fingerprint" aria-hidden="true"></i>
                    <span id="authnButtonText" class="mdc-button__label"
                          th:text="#{screen.welcome.button.login}">Login</span>
                </button>
            </div>
        </div>
        <div>
            <div class="w-100 mdc-data-table table-responsive mx-auto my-4" id="divDeviceInfo" style="display: none">
                <table id="deviceTable" class="table table-striped" style="white-space: unset">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="w-50 mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                        <th class="w-50 mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
            </div>
        </div>

        <form method="POST" id="webauthnLoginForm" class="fm-v clearfix" th:action="@{/login}">
            <input type="hidden" name="_eventId" value="validate"/>
            <input type="hidden" id="token" name="token"/>
            <input type="hidden" name="geolocation"/>
            <input type="hidden" id="authnCsrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
        </form>

        <input type="hidden" id="loginCsrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

        <script type="text/javascript">
            const csrfToken = $('#loginCsrfToken').val();
            
            let btn = document.getElementById('authnButton');
            btn.addEventListener('click', event => {
                $("#errorPanel").hide();
                let username = '[[${principal?.id}]]';
                if (username === '') {
                   username = $("#fm1 #username").val();
                }
                authenticate(username);
            }, false);

        </script>

    </div>
</main>
</body>

</html>
